<!--
 * @Date: 2023-03-22 14:25:31
 * @LastEditTime: 2023-04-01 13:36:40
 * @FilePath: /nlk/src/views/home/components/coinList.vue
 * 介绍:
-->
<script lang="ts" setup>
import { formatNumber, _require } from "@@/utils/tools/tools";
import applyBuy from "./applyBuy.vue";
import { HomeData } from "@@/api/page/home";
import toast from "@@/hooks/toast";
import useBalanceStore from "@@/store/useBalanceStore";

const balanceStore = useBalanceStore();
const { ethCoinEnum } = storeToRefs(balanceStore);
const props = defineProps<{
  store: HomeData.StoreItem[] | undefined;
  toAddress: string;
}>();
const applyBuyRef = ref<InstanceType<typeof applyBuy>>();

const { t } = useI18n();
function openApplyBuy(goods: HomeData.StoreItem) {
  if (!goods.store.length)
    return toast.text(t("zan-wei-kai-fang-gai-chan-ping"));
  if (goods.store) applyBuyRef.value?.open(goods, props.toAddress!);
}
function getMaxMultipe(store: HomeData.GoodsOption[]): StrNumber {
  if (!store.length) return "N";
  return (
    Number(
      store.reduce((pre, v) => {
        if (Number(pre.multiple) < Number(v.multiple)) return v;
        return pre;
      }).multiple
    ) * 100
  );
}
</script>

<template>
  <Ccard class="coinList">
    <div class="flex-J-SB flex-A-C">
      <h4 class="T-nowrap">{{ $t("li-cai-chan-pin") }}</h4>
      <van-field
        class="search"
        left-icon="search"
        :placeholder="$t('sou-suo-bi-zhong')"
        :border="true"
      />
    </div>
    <Cgrid col="auto 1fr 190rem" v-for="goods in store" class="T-S-sm coinListItem">
      <CgridItem justify="start" class="flex-A-C">
        <Rimage
          height="60rem"
          width="60rem"
          :src="ethCoinEnum[goods.code]?.logo"
        />
        <h3 class="ML-xs">{{ goods.code }}</h3>
      </CgridItem>
      <CgridItem justify="end">
        <span>{{ $t("zui-gao") }}</span>
        <span class="C-M1 T-strong MR-1 ML-1">
          {{ getMaxMultipe(goods.store!) }}%
        </span>
        <span>{{ $t("shou-yi") }}</span>
      </CgridItem>
      <CgridItem justify="end">
        <VanButton
          @click="openApplyBuy(goods)"
          class="subscription"
          color="#dce0e6"
          size="small"
          round
        >
          {{ $t("li-ji-shen-gou") }}
        </VanButton>
      </CgridItem>
    </Cgrid>
    <applyBuy ref="applyBuyRef" />
  </Ccard>
</template>

<style lang="less" scoped>
.search {
  border-radius: 999rem;
  border: solid 1rem var(--C-OT2);
  font-size: var(--T-S-xs);
  width: 50%;
}
.subscription {
  color: var(--C-T1) !important;
}
.coinList {
  min-height: 695rem;
  background-image: url(@@/assets/images/home/decoration__2.png);
  background-repeat: no-repeat;
  background-position: 80% 60%;
  .coinListItem {
    padding: var(--gap-md) 0;
    border-bottom: solid 1rem var(--C-OT2);
  }
}
</style>
